<template>
    <div class="main">
        <div class="mod-tag">
            <div class="tag-list-area">
                <a class="tag-tit">区域</a>
                <!--
                <a class="tag-item-select">全部</a>
                <a class="tag-item">内地</a>
                <a class="tag-item">港台</a>
                <a class="tag-item">欧美</a>
                <a class="tag-item">韩国</a>
                <a class="tag-item">日本</a> -->
                <a class="tag-item" v-for="areaValue in areaData" :key="areaValue.id">{{areaValue.name}}</a>
            </div>
            <div class="tag-list-version">
                <a class="tag-tit">版本</a>
                <a class="tag-item" v-for="areaValue in versionData" :key="areaValue.id">{{areaValue.name}}</a>
            </div>
            <ul class="sui-tag">
                <li class="with-x">全部<i>×</i></li>
                <li class="with-x">港台<i>×</i></li>
                <li class="with-x">日本<i>×</i></li>
                <li class="with-x">欧美<i>×</i></li>
            </ul>
        </div>
        <div class="part-detail-tit">全部MV</div>
        <div class="part-switch">
            <button class="btn-s">最新</button>
            <button class="btn-b">最热</button>
        </div>
        <div class="mod-part-detail">
            <div class="part-detail-hd">

                <ul class="mv-list">
                    <li class="mv-list-item">
                        <div class="mv-itembox"></div>
                        <a href="###" class="mv-itemcover">
                            <img src="https://y.qq.com/music/photo_new/T015R640x360M000003R9T6D0PsRzC.jpg?max_age=2592000"
                                alt="">
                            <i class="mod-covermack"></i>
                            <i class="mod-covericon"></i>
                        </a>
                        <div class="mv-list-title">
                            <a href="###">退役军人之歌</a>
                            <div class="mv-list-singer">
                                <a href="###">阎维文</a>
                            </div>
                            <div class="mv-list-info">
                                <span class="mv-list-listen">
                                    <i class="iconfont icon-shexiangtou"></i>
                                    745
                                </span>
                                2022-09-08
                            </div>
                        </div>

                    </li>
                    <li class="mv-list-item">
                        <div class="mv-itembox"></div>
                        <a href="###" class="mv-itemcover">
                            <img src="https://y.qq.com/music/photo_new/T015R640x360M000003lhSps2DX9ey.jpg?max_age=2592000"
                                alt="">
                            <i class="mod-covermack"></i>
                            <i class="mod-covericon"></i>
                        </a>
                        <div class="mv-list-title">
                            <a href="###">陈卓璇《晒月光的人》</a>
                            <div class="mv-list-singer">
                                <a href="###">穿越火线手游 /陈卓璇</a>
                            </div>
                            <div class="mv-list-info">
                                <span class="mv-list-listen">
                                    <i class="iconfont icon-shexiangtou"></i>
                                    36
                                </span>
                                2022-09-09
                            </div>
                        </div>

                    </li>
                    <li class="mv-list-item">
                        <div class="mv-itembox"></div>
                        <a href="###" class="mv-itemcover">
                            <img src="https://y.qq.com/music/photo_new/T015R640x360M000001VcAHS49GkXq.jpg?max_age=2592000"
                                alt="">
                            <i class="mod-covermack"></i>
                            <i class="mod-covericon"></i>
                        </a>
                        <div class="mv-list-title">
                            <a href="###">光与影的对白</a>
                            <div class="mv-list-singer">
                                <a href="###">洛天依</a>
                            </div>
                            <div class="mv-list-info">
                                <span class="mv-list-listen">
                                    <i class="iconfont icon-shexiangtou"></i>
                                    303
                                </span>
                                2022-09-09
                            </div>
                        </div>

                    </li>
                    <li class="mv-list-item">
                        <div class="mv-itembox"></div>
                        <a href="###" class="mv-itemcover">
                            <img src="https://y.qq.com/music/photo_new/T015R640x360M000002IGHJ01x8P7e.jpg?max_age=2592000"
                                alt="">
                            <i class="mod-covermack"></i>
                            <i class="mod-covericon"></i>
                        </a>
                        <div class="mv-list-title">
                            <a href="###">对月独饮醉孤影 (KTV版)</a>
                            <div class="mv-list-singer">
                                <a href="###">郁响林 /王爱华</a>
                            </div>
                            <div class="mv-list-info">
                                <span class="mv-list-listen">
                                    <i class="iconfont icon-shexiangtou"></i>
                                    4
                                </span>
                                2022-09-09
                            </div>
                        </div>

                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
  
<script lang="ts">
export default {
    name: 'Newdisc',
}
</script>
  
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { getMusicvideoApi } from '@/api/musicvideo/getMusicvideoApi';

// interface IareaData{
//     name:string,
//     id:number
// }
const areaData = ref<any[]>([])

const versionData = ref<any[]>([])


onMounted(async () => {
    const ruslut = await getMusicvideoApi();
    const areaList = ruslut.mv_tag.data
    areaData.value = areaList.area
    versionData.value = areaList.version
})

</script>
  
<style scoped>
.main {
    width: 100%;
    height: 100%;
    margin: 0px -15px;
    padding: 55px 0;
    background-color: aliceblue;
}

.tag-list-area {
    font-size: 15px;
    margin: 0 60px 30px;
}

.tag-list-area a {
    margin: 15px;
}

.tag-list-version {
    font-size: 15px;
    margin: -7px 60px 30px;
}

.sui-tag {
    list-style: none;
    padding: 5px 0;
    margin: 0 71px;

}

.with-x {
    font-size: 14px;
    margin: 0 5px 5px 0;
    display: inline-block;
    overflow: hidden;
    color: #000;
    background: #f7f7f7;
    padding: 0 7px;
    height: 30px;
    line-height: 20px;
    border: 1px solid #dedede;
    white-space: nowrap;
    transition: color 400ms;
    cursor: pointer;
}

.with-x i {
    margin-left: 2px;
    cursor: pointer;
    font: 400 14px tahoma;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.with-x:hover {
    color: #fff;
    background-color: #31c27c;
}


.tag-list-version a {
    margin: 15px;
}

.part-detail-hd {
    margin: -40px 5px;
}

.mod-part-detail {
    margin: 70px;
}

.part-switch {
    margin-left: 962px;
    margin-top: -39px;
}

.btn-s {
    height: 38px;
    width: 60px;
    background-color: #31c27c;
    color: #fff;
    border: 0.5px solid gray;
}

.btn-b {
    height: 38px;
    width: 60px;
    background-color: #fff;
    border: 0.5px solid gray;
}

.mv-list {
    margin: 0 -15px;
    list-style: none;
    display: flex;
}

.mv-itemcover img {
    width: 235px;
    height: 150px;
    margin: 0px 12px;
    /* padding: 0 0; */
}

.mv-list-title {
    margin: 16px 10px;
}

.mv-list-title a {
    text-decoration: none;
    font-size: 14px;
    color: #000;
}

.mv-list-title :hover {
    color: #31c27c;
}

.mv-list-info {
    color: #999;
    font-size: 10px;
}

.mv-list-singer a {
    color: #999;
    text-decoration: none;
}

.mv-list-singer a:hover {
    color: #31c27c;
}

.part-detail-tit {
    font-size: 24px;
    margin: 0 73px;
}
</style>
  